<template>
    <view>
        <!-- 自定义nvabar s -->
        <address-nav-bar @blankaddress="blankaddress" :title="locaDistrict"></address-nav-bar>
        <!-- 自定义nvabar e-->
        
        <view class="main">
            <!-- 视频 -->
            <video class="video" :src="baseUrl+benner.list[0].img" v-if="benner.show_type == 1"></video>
            
            <!-- 轮播图 -->
            <view class="video" v-if="benner.show_type == 0" style="height: 300rpx;border-radius: 20rpx;">
                <swiper class="swiper" indicator-active-color="#ff4200" indicator-dots="true" indicator-color="rgba(0, 0, 0, .3)" autoplay circular style="height: 300rpx;">
                    <swiper-item v-for="(item,index) in benner.list" :key="index">
                        <image :src="baseUrl+item.img" mode="scaleToFill" style="width: 100%;height: 100%;border-radius: 20rpx;"></image>
                    </swiper-item>
                </swiper>
            </view>
            
            <!-- 功能导航 -->
            <view class="navclass" @click="toeverytion">
                <view v-for="(item, index) in navclassarr" :key="index">
                    <view>
                        <image :id="index" class="img" :src="item.img"></image>
                        <br>
                        {{item.text}}
                    </view>
                </view>
            </view>
            <!-- topimg -->
            <view class="topimg">
                <view class="huishou" @click="toappointment">
                    <image class="img" src="https://re.gxqichang.cn/mini/myhome/home-pic-hsyy@3x.png" mode="scaleToFill"></image>
                    <view class="right">
                        <text class="title">回收预约</text>
                        <text class="text">今天已有<text class="intext">{{getInfo.runnum || 0}}</text>人预约</text>
                        <view class="btn">去预约></view>
                    </view>
                </view>
                <view class="shanggcheng" @click="toshop">
                    <image class="img" src="https://re.gxqichang.cn/mini/myhome/home-pic-gwsc@3x.png" mode="scaleToFill"></image>
                    <view class="right">
                        <text class="title">积分商城</text>
                        <text class="text">环保金这里花 便宜送到家</text>
                        <view class="btn">去逛逛></view>
                    </view>
                </view>
            </view>
            <!-- Hi! zs -->
            <view @click="toappointment" class="HelloZs">
                <view>
                    <image class="img" src="https://re.gxqichang.cn/mini/Usermain/home-icon-msg@3x.png" mode="scaleToFill"></image>
                </view>
                <view>
                    <p class="p1">您好！{{userInfo.nickname || ''}}</p>
                    <p class="p2">{{userInfo.month_num > 0 ? '本月参与垃圾分类'+ userInfo.month_num +'次' : '您本月还未参与垃圾分类, 赶快预约吧!'}}</p>
                </view>
                <view>
                    <view class="portrait">
                        <u-image 
                            width="100%" 
                            height="100%"
                            :src="userInfo.avatar" 
                            shape="circle"></u-image>
                    </view>
                </view>
            </view>
            <!-- 我的环保金 -->
            <view class="myenvironmental" @click="tomyenvironmental">
                <view>
                    <view><text class="text1">我的环保金</text></view>
                    <view><text class="text2">￥</text><text class="text3">{{getInfo.balance || 0}}</text></view>
                </view>
                <view>
                    <image class="img" src="https://re.gxqichang.cn/mini/myhome/home-jinbi@3x.png"></image>
                </view>
            </view>
            <!-- 头条咨询 -->
            <view class="consultation">
                <view class="consultationtop">
                    <view class="textimg">
                        <view class="imgbg">
                            <image class="img" src="../../static/img/dingdan-titlle-list@3x.png"></image>
                        </view>
                        <view><text class="text">公告资讯</text></view>
                    </view>
                    <view class="buttontext" @click="tomoreconsultation"><text>更多 ></text></view>
                </view>
                <view class="consultationbranc">
                    <view>
                        <swiper class="swiper" indicator-color="rgba(0, 0, 0, .2)" indicator-active-color="#1bc078"
                            :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
                            <swiper-item @click="readconsultation(item.id)" v-for="(item, index) in articleList" :key="index">
                                <view class="swiper-item">
                                    <view>
                                        <p class="p">{{item.title}}</p>
                                        <text class="text">{{item.utime | date}}</text>
                                    </view>
                                    <view>
                                        <image class="img" :src="item.cover || '../../static/img/myhome/up-img@3x.png'" mode="">
                                        </image>
                                    </view>
                                </view>
                            </swiper-item>
                        </swiper>
                    </view>
                </view>
            </view>
            <!--精选产品 -->
            <view class="products" v-if="productList.length > 0">
                <view class="productstop">
                    <view class="textimg">
                        <view class="imgbg">
                            <image class="img" src="https://re.gxqichang.cn/mini/myhome/home-list-jxcp@3x.png"></image>
                        </view>
                        <view><text class="text">精选产品</text></view>
                    </view>
                    <view class="buttontext" @click="toshop"><text>更多 ></text></view>
                </view>
                <view class="productsgoods">
                    <view class="goodbox" v-for="(item, index) in productList" :key="index" @click="toProductDetails(item.id)">
                        <view class="imgbox">
                            <image class="img" :src="item.image_url"></image>
                        </view>
                        <view class="textbox">
                            <text class="text1">{{item.name}}</text>
                            <br>
                            <text class="text2">￥{{item.price}}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <drag-button
            :isDock="true"
            :existTabBar="false"
            text="呼叫小哥"
            @btnClick="toappointment"/>
        <!-- <u-tabbar
            :list="tabBarList"
            active-color="#1bc078"
            inactive-color="#cccccc"></u-tabbar> -->
    </view>
</template>

<script>
import QQMapWX from "../../requestApi/qqmap-wx-jssdk.min.js";
    
    export default {
        data() {
            return {
                // navclass 的数据
                navclassarr: [{
                    img: 'https://re.gxqichang.cn/mini/Usermain/home-icon-hsyy@3x.png',
                    text: '回收预约'
                }, {
                    img: 'https://re.gxqichang.cn/mini/Usermain/home-icon-gwsc@3x.png',
                    text: '积分商城'
                }, {
                    img: 'https://re.gxqichang.cn/mini/Usermain/home-icon-fllzn@3x.png',
                    text: '分类指南'
                }, {
                    img: 'https://re.gxqichang.cn/mini/Usermain/home-icon-kfzx@3x.png',
                    text: '客服中心'
                }],
                // tabBarList: [],
                productList: [],
                articleList: [],
                benner: {},
                baseUrl: '',
                userInfo: {},
                getInfo: {},
                locaDistrict: '正在获取定位...',
            };
        },
        onLoad() {
        //     // this.tabBarList = this.$store.state.tabBarList.admin
        },
        mounted() {
            this.baseUrl = this.$store.state.baseUrl;
            if(!this.$u.test.isEmpty(this.$store.state.userInfo)) {
                this.userInfo = this.$store.state.userInfo
            } else {
                this.userInfo = uni.getStorageSync('userInfo');
                this.$store.commit('setUserInfo', this.userInfo);
            }
            this.httpApi();
        },
        methods: {
            // 首页banner api
            _getBannerList() {
                this.$u.api.getBannerList({code: '999'}).then(res => {
                    this.benner = res
                }).catch(e => {
                })
            },
            // 首页文章资讯api 
            _getArticleList() {
                this.$u.api.getArticleList({
                    page: '1',
                    limit: '5',
                    code: '999',
                }).then(res => {
                    this.articleList = res.list
                }).catch(e => {
                })
            },
            // 商品列表api
            _getList() {
                this.$u.api.getList({
                    page: '1',
                    limit: '4',
                    code: '999',
                    where: {boutique: '1'}
                }).then(res => {
                    this.productList = res.list;
                }).catch(e => {
                })
            },
            // 获取位置信息
            getLocat() {
                // 腾讯地图Api
                const qqmapsdk = new QQMapWX({ key: getApp().globalData.qqmapsdkKey });
                uni.getLocation({
                    type: 'wgs84',
                    success: (res) => {
                        qqmapsdk.reverseGeocoder({
                            location: {
                                latitude: res.latitude,
                                longitude: res.longitude
                            },
                            success: data => {
                                this.locaDistrict = data.result.address_component.district
                            },
                        });
                    }
                });
            },
            // 用户信息api
            _getInfo() {
                if(this.$u.test.isEmpty(this.userInfo)) {
                    return ;
                }
                this.$u.api.getInfo().then(res => {
                    this.getInfo = res
                }).catch(e => {})
            },
            _getwptypelist() {
                this.$u.api.getwptypelist({code: '999'}).then(res => {
                     res.forEach((item,index) => {
                        item.plist.forEach((it,idx) => {
                            return it.extra = it.u_price+','+it.unit
                        })
                    })
                    // this.wptypelist = res;
                    this.$store.commit('setWptypeList', res)
                })
            },
            httpApi() {
                uni.showLoading({
                    title: '加载中...'
                })
                Promise.all([
                    this._getArticleList(),
                    this._getBannerList(),
                    this._getList(),
                    this._getInfo(),
                    this.getLocat(),
                    this._getwptypelist(),
                ]).then(res => {
                    uni.hideLoading()
                })
            },
            // tabbars根据 index 点击跳转
            toeverytion(index) {
                index = parseInt(index.target.id)
                if (index === 0) {
                    uni.navigateTo({
                        url: '../Recall_appointment/Recall_appointment'
                    })
                    // console.log(index, '跳转至回收预约')
                }
                
                if (index === 1) {
                    uni.redirectTo({
                        url: '../../shop/pages/user/Tabindex'
                    })
                    // console.log(index, '跳转至积分商城')
                }

                if (index === 2) {
                    uni.navigateTo({
                        url: '../../mend/class_guide/Classification_guide'
                    })
                    // console.log(index, '跳转至分类指南')
                }

                if (index === 3) {
                    uni.navigateTo({
                        url: '../../mend/service_center/Customer_service_center'
                    })
                    // console.log(index, '跳转至客服中心')
                }
            },
            // 跳转至回收预约
            toappointment() {
                uni.navigateTo({
                    url: '../Recall_appointment/Recall_appointment'
                })
                // console.log('跳转至回收预约')
            },
            // 跳转至积分商城
            toshop() {
                uni.redirectTo({
                    url: '../../shop/pages/user/Tabindex'
                })
                // console.log('跳转至积分商城')
            },
            // 跳转至我的环保金
            tomyenvironmental() {
                uni.navigateTo({
                    url: '../My_environmental/myenvironmental'
                })
            },
            // 跳转至更多公告资讯
            tomoreconsultation() {
                uni.navigateTo({
                    url: '../Headlines/Headlines'
                })
            },
            // 点击资讯内容，进行跳转阅读
            readconsultation(id) {
                uni.navigateTo({
                    url: '../Headlines/Information?id='+id
                })
            },
            // 定位地址
            blankaddress() {
                return ;
                uni.navigateTo({
                    url: '../address/address'
                })
            },
            // 商品详情
            toProductDetails(id) {
                uni.navigateTo({
                    url:'/shop/pages/product/productDetails?id='+id
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .main {
        position: relative;
        padding: 30rpx;
        // 顶部视频
        .video {
            width: 100%;
            // height: 300rpx;
            background-color: #a5d391;
            border-radius: 20rpx;
        }

        .navclass,
        .topimg,
        .HelloZs,
        .myenvironmental,
        .consultation,
        .products {
            margin-top: 30rpx;
        }

        // 功能导航
        .navclass {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 220rpx;
            background-color: #ffffff;
            border-radius: 20rpx;
            text-align: center;
            font-size: 24rpx;
            color: #191919;

            .img {
                width: 90rpx;
                height: 90rpx;
            }
        }

        // 顶部导航图
        .topimg {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 220rpx;
            .huishou,.shanggcheng{
                box-sizing: border-box;
                width: calc(50% - 10rpx);
                border-radius: 20rpx;
                height: 220rpx;
                display: flex;
                .img{
                    width: 145rpx;
                    height: 204rpx;
                }
                .right{
                    flex: 1;
                    display: flex;
                    align-items: center;
                    align-content: center;
                    flex-wrap: wrap;
                    margin-right: 30rpx;
                    text{
                        display: block;
                        width: 100%;
                        font-weight: bold;
                    }
                    .title{
                        font-size: 34rpx;
                        margin-bottom: 16rpx;
                    }
                    .text{
                        font-size: 22rpx;
                        margin-bottom: 16rpx;
                        .intext{
                            display: inline;
                            color: #ff4200;
                        }
                    }
                    .btn{
                        height: 40rpx;
                        line-height: 40rpx;
                        color: #fff;
                        border-radius: 99px;
                        font-size: 22rpx;
                        text-align: center;
                        width: 110rpx;
                    }
                }
            }
            .huishou{
                background-color: #fdfffa;
                border: 4px solid #def4c5;
                .title{
                    color: #4ca202;
                }
                .text{
                    color: #bd8e3e;
                }
                .btn{
                    background-color: #4ca202;
                }
            }
            .shanggcheng{
                background-color: #fffbfa;
                border: 4px solid #fae3db;
                .title{
                    color: #ff6000;
                }
                .text{
                    color: #dcaf37;
                }
                .btn{
                    background-color: #ff6000;
                }
            }
        }

        // 你好ZS
        .HelloZs {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 150rpx;
            background-color: #bfeeff;
            border-radius: 20rpx;
            border: solid 2rpx #b9e6f7;

            .img {
                width: 119rpx;
                height: 103rpx;
            }

            .p1 {
                font-size: 30rpx;
                color: #01739d;
            }

            .p2 {
                font-size: 24rpx;
                color: #43a3c8;
            }

            .portrait {
                width: 70rpx;
                height: 70rpx;
                background-color: #FFFFFF;
                border-radius: 50%;
            }
        }

        // 我的环保金
        .myenvironmental {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 220rpx;
            background-color: #fff9c4;
            border-radius: 20rpx;
            border: solid 2rpx #f7f2be;
            padding: 0 46rpx 0 60rpx;

            .text1 {
                font-size: 28rpx;
                color: #846252;
            }

            .text2 {
                font-weight: 600;
                font-size: 40rpx;
                color: #ff4200;
            }

            .text3 {
                font-weight: 600;
                font-size: 70rpx;
                color: #ff4200;
            }

            .img {
                width: 165rpx;
                height: 156rpx;
            }
        }

        // 头条咨询
        .consultation {
            height: 332rpx;
            background-color: #ffffff;
            border-radius: 20rpx;
            padding: 30rpx;
            box-sizing: border-box;

            .consultationtop {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .textimg {
                    display: flex;

                    .imgbg {
                        width: 48rpx;
                        height: 48rpx;
                        background-color: #fffae5;
                        border-radius: 50%;
                        text-align: center;
                        line-height: 48rpx;

                        .img {
                            width: 30rpx;
                            height: 30rpx;
                        }
                    }
                }

                .text {
                    margin-left: 20rpx;
                    font-weight: 600;
                    font-size: 36rpx;
                    color: #191919;
                }

                .buttontext {
                    width: 120rpx;
                    height: 48rpx;
                    background-color: #e9faff;
                    border-radius: 24rpx;
                    font-size: 24rpx;
                    color: #00a2ff;
                    text-align: center;
                    line-height: 48rpx;
                }
            }

            .consultationbranc {
                height: 234rpx;
                border-radius: 10rpx;
                margin-top: 30rpx;

                .swiper {
                    height: 230rpx;

                    .swiper-item {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-left: 10rpx;
                        padding: 15rpx 30rpx;
                        background-color: #fafcff;
                    }

                    .img {
                        width: 170rpx;
                        height: 114rpx;
                        border-radius: 10rpx;
                    }

                    .p {
                        font-size: 28rpx;
                        color: #666666;
                        // line-height: 61rpx;
                        margin-bottom: 20rpx;
                    }

                    .text {
                        font-size: 24rpx;
                        color: #999999;
                    }
                }
            }
        }

        // 精选商品
        .products {
            // height: 918rpx;
            background-color: #ffffff;
            border-radius: 20rpx;
            padding: 30rpx;
            margin-bottom: 50rpx;

            .productstop {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .textimg {
                    display: flex;

                    .imgbg {
                        width: 48rpx;
                        height: 48rpx;
                        background-color: #fffae5;
                        border-radius: 50%;
                        text-align: center;
                        line-height: 48rpx;

                        .img {
                            width: 50rpx;
                            height: 50rpx;
                        }
                    }
                }

                .text {
                    margin-left: 20rpx;
                    font-weight: 600;
                    font-size: 36rpx;
                    color: #191919;
                }

                .buttontext {
                    width: 120rpx;
                    height: 48rpx;
                    background-color: #e9faff;
                    border-radius: 24rpx;
                    font-size: 24rpx;
                    color: #00a2ff;
                    text-align: center;
                    line-height: 48rpx;
                }
            }

            .productsgoods {
                display: flex;
                flex-wrap: wrap;
                width: 690rpx;


                .goodbox {
                    width: 305rpx;
                    height: 380rpx;
                    background-color: #ffffff;
                    border-radius: 8rpx;
                    border: solid 2rpx #f7f7fc;
                    margin: 20rpx 20rpx 0 0;
                    padding: 20rpx;
                    box-sizing: border-box;

                    .imgbox {
                        text-align: center;

                        .img {
                            width: 263rpx;
                            height: 245rpx;
                            background-color: #EEEEEE;
                        }
                    }

                    .textbox {
                        .text1 {
                            display: block;
                            width: 263rpx;
                            font-size: 24rpx;
                            color: #191919;
                            overflow:hidden;
                            text-overflow:ellipsis;
                            white-space:nowrap
                        }

                        .text2 {
                            font-size: 24rpx;
                            color: #ff4200;
                        }
                    }
                }
            }
        }
    }
</style>
